<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"
        integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ=="
        crossorigin="anonymous"></script>
    <title>WebSocket 测试</title>
</head>

<body>
    <div style="margin-bottom:5px;">
        房间号: <input type="text" id="txtRoomNo" value="8888" /> <button id="btnJoin">加入房间</button> <button
            id="btnLeave">退出房间</button>
    </div>
    <div style="margin-bottom:5px;">
        昵称: <input type="text" id="txtNickName" value="" placeholder="请输入昵称" />
    </div>
    <div style="height:300px;width:600px">
        <textarea style="height:100%;width:100%" id="msgList"></textarea>
        <div style="text-align: right">
            <input type="text" id="txtMsg" value="" /> <button id="btnSend">发送消息</button>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
    // var server = 'ws://localhost:5018'; //如果开启了https则这里是wss
    var server = 'ws://111.230.171.152:4002';

    var WEB_SOCKET = new WebSocket(server + '/ws');

    WEB_SOCKET.onopen = function (evt) {
        console.log('Connection open ...');
        $('#msgList').val('网络连接已打开 .');
    };

    WEB_SOCKET.onmessage = function (evt) {
        console.log('收到消息: ' + evt.data);
        if (evt.data) {
            var content = $('#msgList').val();
            content = content + '\r\n' + evt.data;

            $('#msgList').val(content);
        }
    };

    WEB_SOCKET.onclose = function (evt) {
        console.log('连接已关闭.');
    };

    $('#btnJoin').on('click', function () {
        var roomNo = $('#txtRoomNo').val();
        var nick = $('#txtNickName').val();
        if (!nick || !roomNo) {
            alert("请填写完整昵称和房间号!");
            return;
        }
        if (roomNo) {
            var msg = {
                action: 'join',
                msg: roomNo,
                nick: nick
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        }
    });

    $('#btnSend').on('click', function () {
        var message = $('#txtMsg').val();
        var roomNo = $('#txtRoomNo').val();
        var nick = $('#txtNickName').val();
        if (!nick || !roomNo) {
            alert("请填写完整昵称和房间号!");
            return;
        }
        if (message) {
            WEB_SOCKET.send(JSON.stringify({
                action: 'send_to_room',
                msg: message,
                nick: nick
            }));
        }
    });

    $('#btnLeave').on('click', function () {
        var nick = $('#txtNickName').val();
        var msg = {
            action: 'leave',
            msg: '',
            nick: nick
        };
        WEB_SOCKET.send(JSON.stringify(msg));
    });
</script>